//第三方引入
import React, { useEffect, useState } from 'react';
import {
  Button,
  Card,
  Space,
  Table,
  Form,
  Input,
  Modal,
  Popconfirm,
} from 'antd';
import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  SearchOutlined,
} from '@ant-design/icons';

//自己引入的
import {
  loadDataAPI,
  insetrDataAPI,
  delByIdAPI,
  updateByIdAPI,
} from '../../../api/hospitallist';

const HospitalList: React.FC = () => {
  //数据
  const [list, setList] = useState([]);
  //总数量
  const [total, setTotal] = useState(0);
  //查询条件
  const [query, setQuery] = useState({
    page: 1,
    pageSize: 10,
    name: '',
  });
  //控制窗口的开关
  const [open, setOpen] = useState(false);
  //获取表单实例
  const [myForm] = Form.useForm();
  //当前id
  const [currentId, setCurrentId] = useState('');

  //发送网络请求
  useEffect(() => {
    loadDataAPI(query).then((res) => {
      console.log(res);
      setList(res.data.list);
      setTotal(res.data.total);
    });
  }, [query]);

  useEffect(() => {
    if (!open) {
      //关了弹窗之后重置当前id
      setCurrentId(''); //重置currentId为空
    }
  }, [open]);
  return (
    <div className='wrap'>
      <Card
        title='会员医院'
        extra={
          <>
            <Button
              type='primary'
              icon={<PlusOutlined />}
              onClick={() => setOpen(true)}
            ></Button>
          </>
        }
      >
        <Form
          layout='inline'
          onFinish={(v) => {
            console.log('v', v);
            //改变query之后重新查询数据
            setQuery({ ...query, name: v.name, page: 1 });
          }}
        >
          <Form.Item label='名字' name='name'>
            <Input placeholder='请输入关键词' />
          </Form.Item>
          <Form.Item>
            <Button
              type='primary'
              htmlType='submit'
              icon={<SearchOutlined />}
            />
          </Form.Item>
        </Form>
        <Table
          dataSource={list}
          rowKey='id'
          bordered
          columns={[
            {
              title: '序号',
              render(v: any, r: any, i: any) {
                return i + 1;
              },
              width: 80, //宽度
              align: 'center', //居中
            },
            {
              title: '名字',
              dataIndex: 'name',
              width: 80,
            },
            {
              title: '简介',
              dataIndex: 'desc',
              ellipsis: true,
              width: 350,
            },
            {
              title: '操作',
              width: 120,
              render(v: any) {
                return (
                  <Space>
                    <Button
                      type='primary'
                      size='small'
                      icon={<EditOutlined />}
                      onClick={() => {
                        setOpen(true);
                        myForm.setFieldsValue({ ...v });
                        setCurrentId(v.id);
                      }}
                    >
                      修改
                    </Button>
                    <Popconfirm
                      title='是否确认删除此项'
                      onConfirm={async () => {
                        await delByIdAPI(v.id);
                        setQuery({
                          ...query,
                        });
                      }}
                    >
                      <Button
                        type='primary'
                        size='small'
                        icon={<DeleteOutlined />}
                        danger
                      >
                        删除
                      </Button>
                    </Popconfirm>
                  </Space>
                );
              },
            },
          ]}
          pagination={{
            total,
            // showSizeChanger: true,
            //事件,当页面和每页显示的数据改变之后执行
            onChange(page, pageSize) {
              setQuery({
                ...query,
                page,
                pageSize,
              });
            },
          }}
        ></Table>
      </Card>
      <Modal
        title='编辑'
        open={open} //对话框是否可见
        onCancel={() => setOpen(false)} //点击遮罩层或右上角叉或取消按钮的回调
        destroyOnClose //关闭的时候销毁
        maskClosable={false} //点遮罩层不关闭
        //点击确定按钮的时候执行
        onOk={() => {
          myForm.submit(); //1 手动触发表单的提交事件
        }}
      >
        <Form
          preserve={false} //表单关闭之后销毁
          form={myForm}
          //2 表单提交的时候执行
          onFinish={async (v) => {
            if (currentId) {
              //表示编辑
              await updateByIdAPI(currentId, { ...v });
            } else {
              //表示新增
              await insetrDataAPI({ ...v }); //点击确定把表单中的数据存下来
            }

            setOpen(false); //关了模态框
            setQuery({ ...v, name: '', page: 1 }); //重置query,重新调接口取数据
          }}
        >
          <Form.Item label='名字' name='name'>
            <Input placeholder='请输入医院的名字' />
          </Form.Item>
          <Form.Item label='简介' name='desc'>
            <Input placeholder='请输入医院的简介' />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default HospitalList;
